<template>
	<view class="container">
		<view class="userBox">
			<block v-if="!hasUserInfo">
				<image class="user-avatar" src="~@/static/icon/initTOU.png" mode="cover"></image>
				<p @click="getLoginCode()" class="getInfo"> 请先登录 </p>
				<p class="phone">让品牌力量让更多人看见</p>
			</block>
			<block v-else>
				<image class="user-avatar" :src="userInfo.avatarUrl" mode="cover"></image>
				<text class="userinfo-nickname">{{userInfo.nickName}}</text>
			</block>
		</view>


		<view class='nav'>
			<u-cell-group class="cell_box" :border='false'>
				<u-cell title="订单中心" icon="/static/icon/order.png" :isLink="true" :border='false'></u-cell>
				<u-cell title="数据中心" icon="/static/icon/data.png" :isLink="true" @click="toOrder()" :border='false'>
				</u-cell>
				<u-cell title="编辑资料" icon="/static/icon/info.png" :isLink="true" :border='false' @click='toImprove()'>
				</u-cell>
				<u-cell title="设置" icon="/static/icon/set.png" :isLink="true" :border='false' :disabled='true'></u-cell>
			</u-cell-group>
		</view>

	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				userInfo: {},
				hasUserInfo: false,
			};
		},
		methods: {
			toOrder() {
				uni.navigateTo({
					url: '../order/order',
				})
			},
			toImprove() {
				uni.navigateTo({
					url: '../improve/improve',
				})
			},
			getLoginCode() {
				
				
				uni.getUserProfile({
					desc: '获取微信用户的昵称与头像',
					success: (resp) =>{
						console.log('usInfo',resp)
						this.userInfo=resp.userInfo
						this.hasUserInfo=true
						uni.login({
							success:(res)=>{
								console.log('这里取code',res)
								let code = res.code;
								console.log(res.code);
								let data = resp.userInfo;
								//console.log(nickName);
								//console.log(avatarUrl);
								this.userInfo=data
								uni.request({
									"url": '',
									"method": "POST",
									"data": data,
									success: function(res) {

									}
								});
							},
							fail: (error)=> {
								console.log("授权失败");
							}
						})
					}
				})
			},
			//这里授权结束

		}

	}
</script>

<style lang="stylus">
	/deep/ .getInfo {
		background none;
		width 100px;
		font-size 16px;
		font-weight 600;
		position absolute
		top 80upx;
		left 60upx;
	}

	.nav {
		background-color #FFFFFF;
		margin 0 20px;
		border-radius 30upx;
		padding 10px 0;
	}

	.userBox {
		background-color: #FFFFFF;
		margin 40px 20px 20px 20px;
		border-radius: 15px;
		position relative;
		padding 60px 20px;
	}

	.user-avatar {
		display: inline-block;
		width: 65px;
		height: 65px;
		border-radius: 50%;
		position: absolute;
		top: -30px;
		left: 25px;
	}

	.user-name {
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 2px;
		position: absolute;
		top: 50px;
		left: 30px;
	}

	.phone {
		font-size: 12px;
		color: #999999;
		position: absolute;
		top: 80px;
		left: 25px;
	}

	.icon-right {
		font-size: 20px;
		color: #999999;
		position: absolute;
		top: 85px;
		right 0;
	}

	.cell_box {
		margin: 20px 20px;
		background-color: #FFFFFF;
		border-radius: 15px;

	}

	.icon-right {
		position absolute;
		top 60px;
		right 15px;
	}

	/deep/ .u-cell__title-text {
		color #000000;
		margin-left 10px;
	}

	/deep/ .u-cell__body {
		padding 30px 15px;
	}
</style>
